<template>
  <div class="carousel">
    <n-form label-placement="left" :model="formData">
      <n-row :gutter="24">
        <n-col :span="5">
          <n-form-item label="轮播图名称">
            <n-input placeholder="轮播图名称" v-model:value="formData.carousel_name"></n-input>
          </n-form-item>
        </n-col>
        <n-col :span="5">
          <n-form-item>
            <n-space>
              <n-button type="info" @click="handleSearch">查询</n-button>
              <n-button @click="handleReset">重置</n-button>
            </n-space>
          </n-form-item>
        </n-col>
      </n-row>
    </n-form>
    <n-space>
      <n-button type="info" @click="handleAdd">添加</n-button>
    </n-space>
    <br/>
    <n-data-table
        remote
        :pagination="pagination"
        :columns="columns"
        :data="list"
        size="small"
    ></n-data-table>
    <CarouselModal ref="modal" @list="handleList"></CarouselModal>
    <CarouselImg ref="img"></CarouselImg>
  </div>
</template>

<script lang="ts">
export default {
  name: "carousel"
}
</script>

<script setup lang="ts">
import {onMounted, reactive, ref, h} from "vue"
import useSystem from '@/hooks/useSystem'
import {carouselColumns, CarouselListType} from '@/view/shopping/carousel/carouselType'
import {ums_carousel_delete, ums_carousel_list} from '@/api/sms'
import CarouselModal from '@/view/shopping/carousel/CarouselModal.vue'
import CarouselImg from '@/view/shopping/carousel/CarouselImg.vue'
import url from '@/static/config'
import {NSpace, NButton} from 'naive-ui'


const columns = carouselColumns(row)

const {pagination, list, success, error} = useSystem<CarouselListType[]>(getList)

const formData = reactive({
  carousel_name: ""
})

const modal = ref<{
  init: (data?: CarouselListType) => void
}>()
const img = ref<{
  init: (src: string) => void
}>()


function row (r:CarouselListType, text) {
  if (text === "carousel_img") {
    const src = url + "static/images/" + r[text]
    return h("img", {
      src: src,
      height: 50,
      width: 100,
      onclick: () => imgClick(src),
      style: {
        cursor: "pointer"
      }
    })
  }
  return h(NSpace, {} , [
      h(NButton, {
        type: 'info',
        onclick: () => handleEdit(r)
      }, "编辑"),
      h(NButton, {
        type: "error",
        onclick: () => handeldelete(r)
      }, "删除")
  ])
}

function getList () {
  ums_carousel_list({
    current: pagination.page,
    pageSize: pagination.pageSize,
    data: formData
  }).then(res => {
    pagination.itemCount = res.data.total
    pagination.pageSize = res.data.pageSize
    pagination.page = res.data.current
    list.value = res.data.list
  })
}

const handleAdd = () => {
  modal.value?.init()
}

const handleSearch = () => {
  pagination.page = 1
  getList()
}

const handleReset = () => {
  pagination.page = 1
  formData.carousel_name = ""
  getList()
}

const handleList = () => {
  getList()
}

function imgClick (src: string) {
  img.value?.init(src)
}

function handleEdit (r:CarouselListType) {
  // console.log(r)
  modal.value?.init(r)
}

function handeldelete (r:CarouselListType) {
  ums_carousel_delete(r.id).then(res => {
    if (res.code === 200) {
      getList()
      success(res.message)
    }else{
      error(res.message)
    }
  })
}

onMounted( () => {
  getList()
} )
</script>

<style scoped lang="scss">

</style>
